<!DOCTYPE html>
<html>
<head>
    <title>统计查询</title>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">

    .main {
        margin: 0 auto;
        width: 841.89px;
        padding: 10px;
        border: 1px solid black;
    }

    .title {
        padding-top: 30px;
        display: inline-block;
        height: 100px;
    }

    .title>img {
        width: 86px;
        float: left;
        display: block;
        position: relative;
        height: 86px;
        margin-right: 30px;
    }

    .title>span {
        font-size: xx-large;
        font-family: cursive;
        height: 86px;
        line-height: 86px;
    }

    .message {
        display: -webkit-box;
        padding: 10px 140px;
    }

    .message>div>img {
        width: 100px;
        height: 140px;
    }

    .table_l {
        width: 50%;
        padding-left: 100px;
    }

    .score {

        border: 1px solid black;
        padding: 10px;
        padding-left: 100px;
        margin-top: 20px;
    }

    .footer {
        display: inline-flex;
        margin-top: 20px;
    }

    .footer_l {
        margin-left: 100px;
    }

    .footer_r {
        margin-left: 400px;
        letter-spacing: 15px;
    }
</style>
<body>
<a id="renderPdf"><img src="$gqt/admin/image/pdf.png" alt=""></a>
    

    <div class="main">
        <center>
            <div class="title">
                <img src="/GQT/public/static/image/index/logo.png" alt="logo">
                <span>综 合 测 评 得 奖 证 明 表</span>
            </div>
        </center>
        <hr style="border-style: groove">
        <div class="message">
            <div class="table_l">
                <table>
                    <tr>
                        <td>&nbsp姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                        <td>&nbsp民&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp族：</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                        <td>&nbsp学&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                        <td>&nbsp系&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                        <td>&nbsp专&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp业：</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                            <td>获&nbsp得&nbsp学&nbsp分:</td>
                            <td>&nbsp&nbsp1</td>
                        </tr>
                    <tr>
                        <td>&nbsp证&nbsp&nbsp件&nbsp&nbsp号:</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                    <tr>
                        <td>入&nbsp学&nbsp年&nbsp月:</td>
                        <td>&nbsp&nbsp1</td>
                    </tr>
                </table>
            </div>
            <div class="p_img">
                <img src="/GQT/public/static/image/index/logo.png" alt="个人照片">
            </div>
        </div>
        <hr>
        <div class="score">
            <table>
                <tr>
                    <td>德 育：</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>1. 义务献血X次</td>
                </tr>
                <tr>
                    <td></td>
                    <td>2. 拾金不昧5000元</td>
                </tr>
                <tr></tr>
                <tr>
                    <td>智 育：</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>1. 义务献血X次</td>
                </tr>
                <tr>
                    <td></td>
                    <td>2. 拾金不昧5000元</td>
                </tr>
                <tr></tr>
                <tr>
                    <td>体 育：</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>1. 义务献血X次</td>
                </tr>
                <tr>
                    <td></td>
                    <td>2. 拾金不昧5000元</td>
                </tr>
                <tr></tr>
                <tr>
                    <td>其 他 荣 誉：</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>1. 义务献血X次</td>
                </tr>
                <tr>
                    <td></td>
                    <td>2. 拾金不昧5000元</td>
                </tr>
            </table>
        </div>
        <div class="footer">
            <div class="footer_l">
                <span>（院）系公章</span>
            </div>
            <div class="footer_r">
                <span>年 月 日</span>
            </div>
        </div>
        
        <hr style="border-style: double">
        

    </div>
    <!-- </center> -->
</body>
    <script type="text/javascript" src="$gqt/admin/js/html2canvas.js"></script>
    <script type="text/javascript" src="$gqt/admin/js/jsPdf.debug.js"></script>
    <script type="text/javascript">

      var downPdf = document.getElementById("renderPdf");

      downPdf.onclick = function() {
          html2canvas(document.getElementsByClassName("main"), {
              onrendered:function(canvas) {

                  //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 100,595.28,592.28/canvas.width * canvas.height );

                  pdf.save('content.pdf');
                   $('renderPdf').remove(); //最后将iframe删除  

              },
              background: "#FFFFFF",//这里给生成的图片默认背景，不然的话，如果html根节点没有设置背景的话，会用黑色填充。  
            taintTest: false,  
            allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas  
          })
      }
    </script>
</html>
<!--   <script type="text/javascript" src="$gqt/admin/js/html2canvas.js"></script>
    <script type="text/javascript" src="$gqt/admin/js/jsPdf.debug.js"></script> -->